Tengo una pequeña aplicación React/TypeScript/GraphQL que se conecta a una API, obtiene productos y los muestra en la página.

Estoy tratando de crear una prueba que verifique si el nombre del producto está en el documento después de un simulacro de GraphQL, usando getByText , pero sigo recibiendo TestingLibraryElementError: Unable to find an element with the text: iPad 5g. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

También intenté usar getByRole (ver más abajo), pero me da el error TestingLibraryElementError: Unable to find an accessible element with the role "paragraph" and name '/month to month/i'

¿Hay una mejor manera de hacer esto? ¿Cómo puedo verificar si el nombre del producto se muestra correctamente? Agradezco cualquier ayuda.

ProductCard.test.js

 import React from "react"; import { render, screen } from "@testing-library/react"; import TestRenderer from 'react-test-renderer'; import { MockedProvider } from '@apollo/client/testing'; import ProductCard from "../ProductCard"; import { LOAD_PRODUCTS } from "../GraphQL/Queries"; import '@testing-library/jest-dom'; it('renders ProductCard successfully', async () => { const productMock = { request: { query: LOAD_PRODUCTS, }, result: { data: { products: { productName: 'iPad 5g', code: 'i5g', price: 599.99 } }, }, }; const component = TestRenderer.create( <MockedProvider mocks={[productMock]} addTypename={false}> <ProductCard displayName={productMock.result.data.products.productName} price={productMock.result.data.products.price} /> </MockedProvider>, ); await new Promise(resolve => setTimeout(resolve, 0)); expect(screen.getByText(`iPad 5g`)).toBeInTheDocument(); // expect(screen.getByRole('paragraph', { name: /iPad 5g/i })).toBeInTheDocument(); });

TarjetaProducto.tsx

 // imports // ... // ... // TypeScript types // ... // ... const ProductCard: React.FC<Props> = ({ productName, price }) => { return ( <> <Typography>{productName}</Typography> <Typography>{price}</Typography> <Typography><p>Great new features</p></Typography> <Button>Buy Now</Button> </> ); }